<template>
    <mian-layout>
        <el-descriptions labelClassName="mysdItemLable" title="广告位详情" :column="2" border>
            <el-descriptions-item label="归属AR地标ID">{{oDetail.arLandmarkId}}</el-descriptions-item>
            <el-descriptions-item label="AR广告位ID">{{oDetail.adPlaceId}}</el-descriptions-item>
            <el-descriptions-item label="广告位名称">{{oDetail.adPlaceTitle}}</el-descriptions-item>
            <el-descriptions-item label="广告位位置">{{oDetail.adAdress}}</el-descriptions-item>
            <el-descriptions-item label="广告位描述" :span="2">{{oDetail.adPlaceIntroduce}}</el-descriptions-item>
            <el-descriptions-item label="广告位价值分析" :span="2">{{oDetail.adValueAnalysis}}</el-descriptions-item>
            <el-descriptions-item label="定位地址" :span="2">{{dwdz}}</el-descriptions-item>
            
            <el-descriptions-item label="累计访问量（UV）">{{oDetail.totalUv || 0}}</el-descriptions-item>
            <el-descriptions-item label="累计访问量（PV）">{{oDetail.totalPv || 0}}</el-descriptions-item>
           
            <el-descriptions-item label="AR头图" :span="2">
                <div class="imgItemBox">
                    <img :src="oDetail.adArImg">
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="AR视频" :span="2" v-if="oDetail.adArVideo">
                <video class="myvideo" style="width:500px;height:200px" ref="videoEle" controls>
                    <source :src="oDetail.adArVideo" type="video/mp4">
                    您的浏览器不支持Video标签。
                </video>
            </el-descriptions-item>
            <el-descriptions-item label="广告位持有人">{{oDetail.adPlaceOwnerName}}</el-descriptions-item>
            <el-descriptions-item label="关联NFT">
                <template v-if="oDetail.nftName">
                    {{oDetail.nftName}}
                    <span style="padding:0 0 0 10px;color:red;">(
                        <!----0:铸造中,1:处理中,2:已成功,3:失败 4:取消-->
                        <template v-if="oDetail.nftTradeStatus == 0">铸造中</template>
                        <template v-else-if="oDetail.nftTradeStatus == 1">处理中</template>
                        <template v-else-if="oDetail.nftTradeStatus == 2">已成功</template>
                        <template v-else-if="oDetail.nftTradeStatus == 3">失败</template>
                        <template v-else-if="oDetail.nftTradeStatus == 4">取消</template>
                        )
                    </span>
                </template>
            </el-descriptions-item>
        </el-descriptions>
        
        <div class="el-descriptions__header" style="padding-top:20px">
            <div class="el-descriptions__title">广告位投放记录</div>
            <div class="el-descriptions__extra"></div>
        </div>
        <div style="padding:0 0 30px 0 ">
            <relase-list :adPlaceId='id'/>
        </div>
        
        <div style="text-align: center;">
            <my-back type="info" :reGetDataFlag="true">返回</my-back>
            <el-button type="success" plain icon="el-icon-edit" @click="goDetail">修改</el-button>
        </div>
        <div style="display:none">
            <MapContainer ref="aMap" :showMap="true" :point="defaultPoint" @loaded='getdwdz'/>
        </div>
        
    </mian-layout>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myBack from '@/components/public/myBack.vue'
import MapContainer from '@/components/public/MapContainer.vue'
import relaseList from './components/relaseList.vue'
import {
  get_adPlace_detail
} from '@/api/collext'
export default {
    components:{
      myTable,
      myBack,
      MapContainer,
      relaseList
    },
    data(){
        return{
            id:'',
            oDetail:{},
            sceneNames:[],
            dwdz:'',
            defaultPoint:{},
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.id = this.$route.params.id
        this.getData()
    },
    mounted(){
        
    },
    methods:{
        async getData(){ 
            const res = await get_adPlace_detail(this.id)
            this.oDetail = res.data

            this.defaultPoint.lng = res.data.longitude
            this.defaultPoint.lat = res.data.latitude
        },
        async getdwdz(){
            this.dwdz = await this.$refs.aMap.getAddressForlnglat(this.oDetail.longitude,this.oDetail.latitude)
        },
        goDetail(){
            sessionStorage.setItem('details',JSON.stringify(this.oDetail))
            this.$router.push(`/industry/advert/add?id=${this.oDetail.adPlaceId}`)
        }
    }
}
</script>
<style lang="scss" scoped>
    .imgItemBox{
        display: flex;
        img{
            display: block;
            height: 100px;
            margin: 0 10px 0 0;
        }
    }
    .imgList{
        display: flex;
        padding: 0 0 10px 0;
        img{
            display: block;
            height: 70px;
        }
        p{
            display: flex;
            align-items: center; 
            padding: 0 0 0 20px;
        }
    }
</style>
<style lang="scss">
    .mysdItemLable{
        width: 150px;
    }
</style>